<template>
    <div class="page">
       <MainHeader></MainHeader>
        <div class="main">
                <div class=profile-Header>
             <div class="card">
                 <div class="usercover">
                     <div class="cover-button">
                         <button size="small" type="button" class="cbutton"><i class="el-icon-camera
el-icon-video-camera-solid"></i>点击上传</button>

                     </div>


                 </div>
                 <div class="profile-wrapper">
                   <div class="wrapper-main">
                       <div class="touxiang-avatar">
                           <div class="user-avatar">
<!--                               <img src="../../assets/touxiang.jpg" class="avatar-img" width="160" height="160" >-->
                               <el-upload
                                       class="avatar-uploader"
                                       action="https://jsonplaceholder.typicode.com/posts/"
                                       :show-file-list="false"
                                       :on-success="handleAvatarSuccess"
                                       :before-upload="beforeAvatarUpload">
                                   <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                               </el-upload>

                           </div>


                        </div>

                       <div class="avatar-content">
                           <div class="content-head">
                               <h1 class="user-title">
                                   <span class="namecontent">嗯嗯</span>
                               </h1>
                           </div>
                           <div class="content-body">
                               <span class="namecontent-second">计算机</span>

                           </div>
                           <div class="content-footer">
                               <div class="head-button">
                                   <button type="button" @click="personalziliao" class="perdata-button">编辑个人资料</button>
                               </div>

                           </div>

                       </div>
                   </div>
                 </div>



             </div>
         </div>
            <div class="profile-main">
                <div class="main-column">
                    <div class="card ProfileMain">
                        <div class="ProfileMain-header">

                            <ul class="ProfleMain-tabs">
<!--                               <li class="Tabs-item" v-for="(item,index) in items">-->
<!--                                   <a  :class="{active:currentIndex === index}" @click="clicka(index)" >{{item}}</a>-->

<!--                               </li>-->
                               <li class="Tabs-item" v-for="(item, i) in navData">
                                   　<a  :class="{ nav_li : active === i }" :key="i" @click="$router.push({ path: item.path }), active = i">
                                   　　　　　　{{item.name}}
                                   　　　　</a>
                               </li>

<!--                                <li class="Tabs-item active">   <a href="" class="Tabs-link">动态</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">回答</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">视频</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">提问</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">文章</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">专栏</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">想法</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">收藏</a>    </li>-->
<!--                                <li class="Tabs-item ">   <a href="" class="Tabs-link">关注</a>    </li>-->

                            </ul>
                        </div>
                        <div class="listshortcut">
                            <router-view></router-view>
                            <!--                                 <div class="List">-->
                            <!--                                     <div class="List-header"></div>-->
                            <!--                                     <div class="List-content">-->
                            <!--                                         <div class="List-item"></div>-->
                            <!--                                     </div>-->
                            <!--                                 </div>-->


                        </div>

                    </div>
                </div>
                <div class="side-column">
                    <div class="card CreatorEntrance">
                        <a href="" class="CreatorEntrance-link">
                            <div class="CreatorEntrance-hint">
                                <img class="CreatorEntrance-image" src="../../assets/creator_entrance.png" >
                                <div class="CreatorEntrance-text">
                                    <div class="CreatorEntrance-title">
                                        <div class="css-3j2kqe">
                                            创作中心
                                            <span class="css-1ntg9ig">去开通</span>
                                        </div>
                                    </div>
                                    <div class="CreatorEntrance-entranceMessage"></div>
                                </div>
                                <svg class="Zi Zi--ArrowRight CreatorEntrance-arrow" fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><path d="M9.218 16.78a.737.737 0 0 0 1.052 0l4.512-4.249a.758.758 0 0 0 0-1.063L10.27 7.22a.737.737 0 0 0-1.052 0 .759.759 0 0 0-.001 1.063L13 12l-3.782 3.716a.758.758 0 0 0 0 1.063z" fill-rule="evenodd"></path></svg>
                            </div>
                        </a>
                    </div>
                    <div class="card Followshipcard">
                        <div class="NumberBoard">
                            <a type="button" class="NumberBoard-item">
                                <div class="NumberBoard-itemInner">
                                    <div class="NumberBoard-itemName">关注了</div>
                                    <strong class="NumberBoard-itemValue">0</strong>
                                </div>
                            </a>
                            <a type="button" class="NumberBoard-item">
                                <div class="NumberBoard-itemInner">
                                    <div class="NumberBoard-itemName">关注者</div>
                                    <strong class="NumberBoard-itemValue">0</strong>
                                </div>
                            </a>

                        </div>
                    </div>
                    <div class="Profile-lightList">
                        <a class="Profile-lightItem">
                            <span class="Profile-LightItemName">关注的话题</span>
                            <span class="Profile-LightItemValue">0</span>
                        </a>
                        <a class="Profile-lightItem">
                            <span class="Profile-LightItemName">关注的专栏</span>
                            <span class="Profile-LightItemValue">0</span>
                        </a>
                        <a class="Profile-lightItem">
                            <span class="Profile-LightItemName">关注的问题</span>
                            <span class="Profile-LightItemValue">0</span>
                        </a>
                        <a class="Profile-lightItem">
                            <span class="Profile-LightItemName">关注的收藏夹</span>
                            <span class="Profile-LightItemValue">0</span>
                        </a>
                    </div>
                    <div class="Profile-footerOperations">
                        "个人主页被浏览239次"
                    </div>
                    <footer class="Footer"  >
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="//liukanshan.zhihu.com/">刘看山</a>
                        <span class="Footer-dot">.</span>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="/question/19581624">知乎指南</a>
                        <span class="Footer-dot">.</span>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="/term/zhihu-terms">知乎协议</a>
                        <span class="Footer-dot">.</span>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="/term/privacy">知乎隐私保护指引</a><br>
                        <a class="Footer-item" target="_blank" href="/app">应用</a>
                        <span class="Footer-dot">.</span>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="https://app.mokahr.com/apply/zhihu">工作</a>
                        <span class="Footer-dot">.</span>
                        <button type="button" class="Button OrgCreateButton">申请开通知乎机构号</button><br>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="https://zhuanlan.zhihu.com/p/28852607">侵权举报</a>
                        <span class="Footer-dot">.</span>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="http://www.12377.cn">网上有害信息举报专区</a><br>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="https://tsm.miit.gov.cn/dxxzsp/">京 ICP 证 110745 号</a><br>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="https://beian.miit.gov.cn/">京 ICP 备 13052560 号 - 1</a><br>
                        <a class="Footer-item" target="_blank" rel="noopener noreferrer" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020088">
                            <img src="https://pic3.zhimg.com/80/v2-d0289dc0a46fc5b15b3363ffa78cf6c7.png">京公网安备 11010802010035 号</a><br>
                        <span class="Footer-item">互联网药品信息服务资格证书<br>（京）- 非经营性 - 2017 - 0067</span>
                        <span class="Footer-item">违法和不良信息举报：010-82716601</span><br>
                        <a class="Footer-item" target="_blank" href="/term/child-jubao">儿童色情信息举报专区</a><br>
                        <a class="Footer-item" target="_blank" href="/certificates">证照中心</a><br>
                        <a class="Footer-item" target="_blank" href="/contact">联系我们</a>
                        <span> © 2020 知乎</span>
                    </footer>
                    


                </div>

            </div>

        </div>


    </div>
</template>

<script>
    import MainHeader from "../../components/MainHeader";
    export default {
        data() {
            return {
                imageUrl: '',
                active: 0,
                navData: [
                    { name: '动态', path: '/dongtai' },
                    { name: '回答', path: '/answer' },
                    { name: '视频', path: '/video' },
                    { name: '提问', path: '/tiwen' },
                    { name: '文章', path: '/article' },
                    { name: '专栏', path: '/column' },
                    { name: '想法', path: '/idea' },
                    { name: '收藏', path: '/collect' },
                    { name: '关注', path: '/attention' },
                ]
                // items:['动态','回答','视频','提问','文章','专栏','想法','收藏','关注'],
                // currentIndex:0

            };
        },
        name: "Mypage",
        components: {
            MainHeader

        },
        methods: {
            clicka(index) {
                this.currentIndex = index
            },
            personalziliao(){
                this.$router.push('/Gerenziliao')
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }

    }
</script>


<style scoped>
    .page{
        width: 100%;
        height:1200px;
        background: #f6f6f6;
        border: 1px solid #f6f6f6;
       box-sizing: border-box;
        position: relative;
        margin-top: 0;
    }
    .main{
        height:100%;
        margin-top: 80px;

        width: 100%;
    }
    .profile-Header{
        position: relative;
        width: 1000px;
        padding: 0 16px;
        margin: 10px auto;

    }
    .profile-wrapper{
        position: relative;
        width: 100%;
        height: 150px;
        background: #fff;
    }
    .wrapper-main{
        position: relative;
        margin: 0 20px 24px;
    }
    .touxiang-avatar{
        position: absolute;
        top: -60px;
        left: 0;
        z-index: 1;
    }
    .user-avatar{
        border-radius: 8px;
        border: 4px solid #fff;
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        background-color: #fff;
    }


    /*上传*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 160px;
        height: 160px;
        display: block;
        vertical-align: top;
        border-radius: 4px;
    }

    .avatar-img{
        vertical-align: top;
        border-radius: 4px;

    }
    .cover-button{
        display: inline-block;
        margin-top: 20px;
       float: right;
        margin-right: 20px;



    }
    .cbutton{
        color: #d3d3d3;
        background-color: #999999;
        display: inline-block;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        background: none;
        border: 1px solid;
        border-radius: 3px;
        outline: none;
    }
    .cbutton i{
        display: inline-block;
        margin-right: 10px;
    }


    .card{

        background: #fff;
        overflow: hidden;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(18,18,18,.1);




    }
    .card:last-child{
        margin-bottom: 0;
    }
    .usercover{
        height: 132px;
        background: #999;
    }
    .avatar-content{
        padding-top: 16px;
        padding-left: 32px;
        border-left: 164px solid transparent;
    }
    .content-head{
        position: relative;
        padding-right: 106px;
        margin-bottom: 16px;

    }
    .user-title{
        -webkit-box-flex: 1;
        flex: 1 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .namecontent{
        line-height: 30px;
        font-size: 26px;
        font-weight: 600;

    }
    .namecontent-second{
        margin-top: 8px;
        margin-left: 2px;
    }
    .content-footer{
        position: relative;
        padding-top: 8px;
        margin-top: 40px;
    }
    .head-button{
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .head-button:hover{
        background-color: rgba(0,132,255,.08);
    }
    .perdata-button{
        color: #0084ff;
        border-color: #0084ff;
        display: inline-block;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        background: none;
        border: 1px solid;
        border-radius: 3px;
        outline: none;
    }
    .profile-main{
        display: flex;
        width: 1000px;
        min-height: 100vh;
        padding: 0 16px;
        margin: 10px auto;
        align-items: flex-start;

    }
    .main-column{
        width: 694px;
    }
    .ProfileMain{
        overflow: initial;

    }
    .ProfileMain-header{

    }
    .ProfleMain-tabs{
        flex: 1 1;
        border-bottom: 1px solid #f6f6f6;
        display: flex;
        flex-wrap: nowrap;
    }
    ul{
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        padding: 0;
        margin: 0;
    }
    .Tabs-item{
        flex-shrink: 0;
        padding: 0 12px;
        display: inline-block;
    }
    .Tabs-item a{
        position: relative;
        display: inline-block;
        padding: 14px 0;
        font-size: 16px;
        line-height: 22px;
        color: #121212;
        text-align: center;
        text-decoration: none;
    }

    li{
        text-align: -webkit-match-parent;

    }
    .nav_li{
        font-weight: 600;
        border-bottom: 3px solid #0084ff;

    }

    /*侧边栏*/
    .side-column{
        width: 296px;
        color: #646464;
    }
    .CreatorEntrance-link{
        -webkit-box-align: center;
        align-items: center;
        display: flex;
        width: 100%;
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        height: 100%;
    }
    .CreatorEntrance-link a{
        color: inherit;
        text-decoration: none;
    }
    .CreatorEntrance-hint{
        -webkit-box-align: center;
        align-items: center;
        display: flex;
        width: 100%;
    }
    .CreatorEntrance-image{
        height: 40px;
        width: 80px;
    }
    .CreatorEntrance-text{
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-flex: 1;
        flex-grow: 1;
        margin-left: 6px;
        line-height: 16px
    }
    .CreatorEntrance-title{
        font-size: 14px;
        font-weight: 600;
        color: #121212;

    }
    .css-3j2kqe{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
    .css-1ntg9ig{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        color: rgb(0, 132, 255);
    }
    .CreatorEntrance-entranceMessage{
        font-size: 12px;
        margin-top: 2px;
        color: #999;
    }
    .CreatorEntrance-arrow{
        color: #8590a6;
        fill: currentcolor;
        width: 24px;
        height: 24px;
        overflow: hidden;
    }
    .Followshipcard{
        font-size: 14px;
    }
    .NumberBoard{
        display: flex;
    }
    .NumberBoard-item{
        -webkit-box-flex: 1;
        flex: 1 1;
        height: auto;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        color: #8590a6
    }
    .NumberBoard-itemInner{
        padding: 12px 0;
        text-align: center;
        line-height: 1.6;
    }
    .NumberBoard-itemName{
        font-size: 14px;
        color: #8590a6;
    }
    .NumberBoard-itemValue{
        display: inline-block;
        font-size: 18px;
        color: #121212;
        font-weight: 600;
    }
    .NumberBoard-itemName:hover{
        color: rgb(23, 81, 153);
    }
    .NumberBoard-itemValue:hover{
        color: rgb(23, 81, 153);
    }
    .Profile-lightList{
        font-size: 14px;
    }
    .Profile-lightItem{
        padding-left: 5px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        height: 46px;
        font-size: 14px;
        border-top: 1px solid #ebebeb;
    }
    .Profile-LightItemName{
        -webkit-box-flex: 1;
        flex-grow: 1;
    }
    .Profile-LightItemValue{
        font-size: 14px;
        color: #8590a6;
    }
    .Profile-LightItemName:hover{
        color: rgb(23, 81, 153);
    }
    .Profile-LightItemValue:hover{
        color: rgb(23, 81, 153);
    }
    .Profile-footerOperations{
        color: #8590a6;
        width: 100%;
        padding: 10px 0 10px 5px;
        box-sizing: border-box;
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
        border-bottom: 1px solid #ebebeb;
    }













    /*尾部*/
    .Footer {
        padding: 10px 0 10px 5px;
        font-size: 13px;
        line-height: 2;
        color: #8590a6;
    }
    .Footer a {
        padding: 10px 0 10px 5px;
        font-size: 13px;
        line-height: 2;
        color: #8590a6;
    }
    .Footer button {
        color: #8590a6;
        border: none;
        padding: 0;
        background: none;
    }




</style>